<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <link href="./css/element-ui.min.css" rel="stylesheet" />
  <!-- <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css" rel="stylesheet"> -->
</head>

<body>
  <div id="app">
    <el-card>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-input v-model="queryInfo.name" placeholder="请输入要查的用户名称或姓名" clearable @clear="getData">
            <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
          </el-input>
        </el-col>
        <el-col :span="14">
          <el-button type="primary" icon="el-icon-circle-plus-outline" plain @click="add">添加记录</el-button>
        </el-col>
      </el-row>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="80"></el-table-column>
        <el-table-column label="网站名称" prop="name"></el-table-column>
        <el-table-column label="网页地址" prop="url"></el-table-column>
        <el-table-column label="网站用途" prop="descr"></el-table-column>
        <el-table-column label="说明" prop="item"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="最近修改时间" prop="updateTime"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row.id)"></el-button>
            <el-tooltip class="item" effect="dark" content="解密" placement="bottom">
              <el-button type="success" icon="el-icon-s-cooperation" circle @click="preDecrypt(scope.row.password)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.page" :page-sizes="[5, 10, 20, 50]" :page-size="queryInfo.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </el-card>
    <!-- 添加信息，修改信息 -->
    <el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="网站地址" prop="url">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="密钥" prop="secretKey">
          <el-input type="password" v-model="form.secretKey" show-password></el-input>
        </el-form-item>
        <el-form-item label="网站描述">
          <el-input v-model="form.descr"></el-input>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="form.item"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="save">保存数据</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 解密操作 -->
    <el-dialog title="请输入密钥" :visible.sync="jieShow" :close-on-click-modal="false" width="500px">
      <el-input v-model="jiemi.secretKey"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="success" @click="decrypt">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</body>
<!-- import Vue before Element -->
<script src="./js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./js/element-ui.min.js"></script>
<script src="./js/axios.min.js"></script>
<script>
  const baseUrl = "/ciphers";
  axios.defaults.baseURL = 'http://localhost:8088'
  new Vue({
    el: "#app",
    data() {
      return {
        queryInfo: {
          name: "",
          page: 1,
          limit: 5,
        },
        tableData: [],
        total: 0,
        show: false,
        editid: null,
        title: "",
        form: {
          username: "",
          password: "",
          url: "",
          name: "",
          item: "",
          descr: "",
          secretKey: "",
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入网站名称', trigger: 'blur' }
          ],
          url: [
            { required: true, message: '请输入网站地址', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          secretKey: [
            { required: true, message: '请输入密钥', trigger: 'blur' }
          ]
        },
        jieShow: false,
        jiemi: {
          password: '',
          secretKey: ''
        }
      };
    },
    created() {
      this.getData();
    },
    methods: {
      // 分页获取用户数据
      getData() {
        axios.get(baseUrl, {
          params: {
            ...this.queryInfo,
          },
        })  .then((response) => {
          this.tableData = response.data.data.records;
          this.total = parseInt(response.data.data.total);
        });
      },
      handleEdit(item) {
        this.title = "添加";
        this.editid = item.id;
        this.show = true;
        this.form  = item;
      },
      add() {
        this.title = "修改";
        this.editid = null;
        this.show = true;
      },
      handleDelete(id) {
        axios.delete(`${baseUrl}/${id}`).then(() => {
          if (  this.total === (this.queryInfo.page - 1) * this.queryInfo.limit + 1 )
            this.queryInfo.page -= 1;
          this.getData();
        });
      },
      handleSizeChange(newSize) {
        this.queryInfo.limit = newSize;
        this.getData();
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage;
        this.getData();
      },
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          if (this.editid) {
            axios.put( `${baseUrl}/${this.editid}`,this.form).then(() => { 
              this.show = false
              this.getData()
            })
          } else {
            axios.post( `${baseUrl}`,this.form).then(() => { 
              this.show = false
              this.getData()
            })
          }
        });
      },
      preDecrypt (password) {
        this.jiemi.password = password
        this.jieShow = true
      },
      decrypt () {
        axios.post(`${baseUrl}/decrypt`,this.jiemi).then( res => { 
          this.jieShow = false
          console.log(res.data.data)
        })
      }
    }
  });
</script>
<style>
  body {
    background-color: #2d5961;
  }
  #app {
    margin-top: 50px;
  }
</style>

</html>
